<template>
    <a-form :model="formState" layout="vertical">
        <a-form-item label="表单名：">
            <a-input v-model:value="formState.name" readonly />
        </a-form-item>
        <a-form-item label="表单模型：">
            <a-input v-model:value="formState.formModel" readonly />
        </a-form-item>
        <a-form-item>
            <a-space>
                <label>表单布局：</label>
                <a-radio-group v-model:value="formState.layout" button-style="solid" @change="onHandleChange">
                    <a-radio-button value="horizontal">水平</a-radio-button>
                    <a-radio-button value="vertical">垂直</a-radio-button>
                </a-radio-group>
            </a-space>
        </a-form-item>
        <a-form-item label="标签长度：" v-if="formState.layout == 'vertical'">
            <a-input-number v-model:value="formState.labelWidth" :min="50" :max="600" :precision="0" :controls="false" style="width: 100%;" />
        </a-form-item>
        <template v-else>
            <a-form-item label="标签长度：">
                <a-input-number v-model:value="formState.labelCol.span" :min="0" :max="24" :precision="0" :controls="false" style="width: 100%;" />
            </a-form-item>
            <a-form-item label="标签偏移量：">
                <a-input-number v-model:value="formState.labelCol.offset" :min="0" :precision="0" :controls="false" style="width: 100%;" />
            </a-form-item>
            <a-form-item label="控件长度：">
                <a-input-number v-model:value="formState.wrapperCol.span" :min="0" :max="24" :precision="0" :controls="false" style="width: 100%;" />
            </a-form-item>
            <a-form-item label="控件偏移量：">
                <a-input-number v-model:value="formState.wrapperCol.offset" :min="0" :precision="0" :controls="false" style="width: 100%;" />
            </a-form-item>
            <a-form-item>
                <a-space>
                    <label>标签对齐：</label>
                    <a-radio-group v-model:value="formState.labelAlign" button-style="solid" @change="onHandleChange">
                        <a-radio-button value="left">左对齐</a-radio-button>
                        <a-radio-button value="right">右对齐</a-radio-button>
                    </a-radio-group>
                </a-space>
            </a-form-item>
        </template>
        <a-form-item label="栅格间隔：">
            <a-input-number v-model:value="formState.gutter" @change="onHandleChange" :min="0" :max="100" :precision="0" :controls="false" style="width: 100%;" />
        </a-form-item>
    </a-form>
</template>

<script lang="ts">
import { reactive, watch, defineComponent } from 'vue';
import type { PropType } from 'vue';

export default defineComponent({
    name: 'FormPanel',
    props: {
        config: {
            type: Object as PropType<Recordable>,
            default: () => ({}),
        },
    },
    emits: ['change'],
    setup(props, { emit }){

        const formState = reactive<Record<string, any>>({});

        const onHandleChange = () => {
            emit('change', formState);
        };

        watch(() => props?.config, val => {
            if(val && Object.keys(val).length){
                Object.assign(formState, val);
            }
        }, { immediate: true, deep: true });

        return {
            formState,
            onHandleChange,
        };
    },
});
</script>

<style lang="less" scoped>
::v-deep(.ant-form-item){ margin-bottom: 14px; }
</style>